<template>
  <!-- 轮播图列表父组件 -->
  <div class="carousel-index">
    <!-- 引用公共表格组件 -->
    <!-- 表格 -->
    <div v-if="rightcom !== 'carouselIndex'">
      <el-button
        class="custom-btn none"
        size="small"
        @click="handleBackClick()"
      >
        <i class="el-icon-arrow-left primary-color"></i> 返回</el-button
      >
    </div>

    <div v-if="rightcom === 'carouselIndex'">
      <CustomTable
        :tableData="tableData"
        :tableHeaders="tableHeaders"
        :showSelection="true"
        :pagination="pagination"
         tableHeight="calc(100vh - 200px)"
        :loading="tableLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
      >
        <!-- 顶部操作按钮插槽 -->
        <template #top-actions>
          <div class="table-buttons">
            <CustomButton
              v-for="button in actionButtons.topButtons"
              :key="button.id"
              :text="button.text"
              size="medium"
              :icon="button.icon"
              fontSize="14px"
              :customStyle="button.customStyle"
              @click="handleClick(button)"
            />
          </div>
        </template>
        <template #action="{ row }">
          <div>
            <el-button
              v-for="button in actionButtons.tableCarouselButtons"
              :key="button.id"
              class="custom-btn none"
              size="small"
              @click="handleClick(button, row)"
              >{{ button.text }}</el-button
            >
          </div>
        </template>
        <template #status="{ row, column, index }">
          <div v-if="column.property === 'status'">
            <el-switch
              v-model="row[column.property]"
              size="small"
              @change="(val) => handleStatusChange(row, column.property, val)"
            ></el-switch>
          </div>
          <div v-else-if="column.property === 'image'">
            <Avatar :src="row[column.property]" />
          </div>
        </template>
      </CustomTable>
    </div>
    <div v-else>
      <CarouselIndexEdit :datas="selectedRows[0]" />
    </div>
  </div>
</template>
<script>
import { color } from "echarts";

import { carouselTableHeaders ,actionButtons} from "@/utils/defaultData";

export default {
  name: "carouselIndex",
  props: {
    datas: Object,
  },
  data() {
    return {
      rightcom: "carouselIndex",
      pagination: {
        total: 16,
        currentPage: 1,
        pageSize: 10,
      },
      scope: {},
      // 选中的行数据
      selectedRows: [],
      columns: [],
      tableLoading: false,
      // 新增按钮配置数组
      actionButtons: actionButtons,
      tableData: [
        {
          name: "轮播图1",
          type: "女1",
          imageUrl:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          image:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          uploadTime: "2025-09-11 10:00:00",
          uploadUser: "admin",
          status: false,
          publishOption: "textImage",
        },
        {
          name: "轮播图2",
          type: "女2",
          imageUrl:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          image:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          uploadTime: "2025-09-11 10:00:00",
          uploadUser: "admin",
          status: false,
          publishOption: "linkJump",
        },
        {
          name: "企业风采",
          type: "男",
          image:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          uploadTime: "2025-09-11 10:00:00",
          uploadUser: "admin",
          status: false,
          publishOption: "textImage",
        },
        {
          name: "企业风采",
          type: "男",
          image:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          uploadTime: "2025-09-11 10:00:00",
          uploadUser: "admin",
          status: false,
          publishOption: "textImage",
        },
        {
          name: "企业风采",
          type: "男",
          image:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          uploadTime: "2025-09-11 10:00:00",
          uploadUser: "admin",
          status: false,
        },
        {
          name: "企业风采",
          type: "男",
          image:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          uploadTime: "2025-09-11 10:00:00",
          uploadUser: "admin",
          status: false,
        },
        {
          name: "企业风采",
          type: "男",
          image:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          uploadTime: "2025-09-11 10:00:00",
          uploadUser: "admin",
          status: false,
        },
        // {
        //   name: "企业风采",
        //   type: "男",
        //   image:
        //     "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
        //   uploadTime: "2025-09-11 10:00:00",
        //   uploadUser: "admin",
        //   status: false,
        // },
        // {
        //   name: "企业风采",
        //   type: "男",
        //   image:
        //     "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
        //   uploadTime: "2025-09-11 10:00:00",
        //   uploadUser: "admin",
        //   status: false,
        // },
        // {
        //   name: "企业风采",
        //   type: "男",
        //   image:
        //     "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
        //   uploadTime: "2025-09-11 10:00:00",
        //   uploadUser: "admin",
        //   status: false,
        // },
      ],
      tableHeaders: carouselTableHeaders
    };
  },
  create() {
    this.getList();
  },
  methods: {
    // 返回上一页
    handleBackClick() {
      console.log("点击了返回按钮", this.rightcom);
      // 可以在这里添加返回逻辑
      this.rightcom = "carouselIndex";
    },
    // 按钮点击处理方法
    handleClick(button,row) {
      console.log("点击了按钮", button,row);
      // 可以在这里添加按钮点击逻辑
      if (button.handler) {
        this[button.handler](button,row);
      }
    },
    // 行编辑
    handleRowEditClick(button,row) {
      console.log("点击了编辑按钮", button,row);
      // 可以在这里添加编辑逻辑
    },
    // 行删除
    handleRowDeleteClick(button,row) {
      console.log("点击了删除按钮", button,row);
      // 可以在这里添加删除逻辑
    },
    // 按钮点击处理方法
    handleAddClick(button) {
      console.log("点击了新增按钮");
      this.rightcom = "CarouselIndexEdit";
      // 可以在这里添加新增逻辑
    },

    handleEditClick(button) {
      console.log("点击了修改按钮", button, this.selectedRows);
      // 可以在这里添加修改逻辑，通常需要检查是否有选中行
      if (this.selectedRows.length === 0) {
        this.$message.warning("请先选择要修改的数据");
        return;
      }
      // 修改逻辑...
      this.rightcom = "CarouselIndexEdit";
    },

    handleDeleteClick() {
      console.log("点击了删除按钮");
      // 可以在这里添加删除逻辑，通常需要检查是否有选中行并二次确认
      // if (this.selectedRows.length === 0) {
      //   this.$message.warning("请先选择要删除的数据");
      //   return;
      // }
      // 删除确认对话框和删除逻辑...
      this.$confirm(
        "确认删除选中的" + this.selectedRows.length + "条数据吗？",
        "删除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 执行删除操作
          this.$message({
            type: "success",
            message: "删除成功",
          });
          // 刷新数据列表
          this.getList();
        })
        .catch(() => {
          // 取消删除操作
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 处理每页显示条数变化
    handleSizeChange(newPagination) {
      console.log("每页条数变化", newPagination);
      this.pagination = newPagination;

      // this.getList();
    },
    // 处理页码变化
    handleCurrentChange(newPagination) {
      this.tableLoading = true;
      console.log("页码变化", newPagination);
      this.tableData = [
        {
          name: "最后加的",
          type: "男",
          image:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          uploadTime: "2025-09-11 10:00:00",
          uploadUser: "admin",
          status: false,
        },
      ];
      // this.pagination = newPagination;
      // this.getList();
    },
    // 处理选择事件
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      console.log("父组件中选项变更了", this.selectedRows);
    },
    handleStatusChange(row, prop, val) {
      console.log("改变了", row, prop, val);
    },
    getList() {
      // 获取数据
      this.tableLoading = true;
      fetchList(
        Object.assign(
          { currrent: this.page.current, size: this.page.size },
          this.searchForm
        )
      )
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.carousel-index {
  padding: 10px;
}
.table-buttons {
  display: flex;
  gap: 10px;
  float: right;
  padding-bottom: 10px;
}
</style>
